import React from 'react'
import "./transaction_currency.scss"
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import { Table, Progress } from 'antd';
import Chart from '../../component/chart'
import { useSelector } from 'react-redux'

export default function Transaction_currency() {
  const languages = useSelector((state) => state.publicReducer.language)
  const EOS_data = [
    {
      key: '1',
      날짜: '2022.11.29',
      보유수량: '1000',
      결산가격: '1,550',
      원화가치: '1,550,000',
    },
    {
      key: '2',
      날짜: '2022.11.28',
      보유수량: '1000',
      결산가격: '1,550',
      원화가치: '1,550,000',
    },
    {
      key: '3',
      날짜: '2022.11.27',
      보유수량: '1000',
      결산가격: '1,550',
      원화가치: '1,550,000',
    },
  ]
  const EOS_columns = [
    {
      title: languages === "Korean" ? "날짜" : (languages === "Chinese" ? "日期" : "Date"),
      key: '날짜',
      dataIndex: '날짜',
      align: "center",
    },
    {
      title: languages === "Korean" ? "보유 수량" : (languages === "Chinese" ? "持有量" : "Holding quantity"),
      key: '보유수량',
      dataIndex: '보유수량',
      align: "center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "결산 가격" : (languages === "Chinese" ? "结算价" : "Closing price"),
      dataIndex: '결산가격',
      key: '결산가격',
      align: "center",
      render: (row) => "₩" + row
    },
    {
      title: languages === "Korean" ? "원화 가치" : (languages === "Chinese" ? "现金价值" : "cash value"),
      dataIndex: '원화가치',
      key: '원화가치',
      align: "center",
      render: (row) => "₩" + row
    },
  ]

  const EOS = {
    EOS1: "9,999,99",
    EOS2: "-9,999,99",
    EOS3: "-9,999,99",
    EOS4: "9,999,99",
    EOS5: "9,999,99",
    EOS6: "9,999,99",
  }
  return (
    <div className='Transaction_currency'>
      <div className='main'>
        <p><i><LeftOutlined /></i> 2022{languages === "Korean" ? "년" : (languages === "Chinese" ? "年" : "Year")} 11{languages === "Korean" ? "월 " : (languages === "Chinese" ? "月" : "Month")} <i><RightOutlined /></i></p>
        <main>
          <div className='left'>
            <div className='top'>
              <h2>{languages === "Korean" ? "수익현황" : (languages === "Chinese" ? "利润状态" : "Profit status")}</h2>
              <hgroup>
                <b>EOC</b>
                <i><Progress showInfo={false} /><Progress percent={70} showInfo={false} status="exception" /></i>
                <span>₩{EOS.EOS1}</span>
              </hgroup>
              <hgroup>
                <b>EOC</b>
                <i><Progress showInfo={false} percent={20} className="blue" /><Progress showInfo={false} status="exception" /></i>
                <span>₩{EOS.EOS2}</span>
              </hgroup>
              <hgroup>
                <b>EOC</b>
                <i><Progress className="blue" percent={70} showInfo={false} /><Progress showInfo={false} status="exception" /></i>
                <span>₩{EOS.EOS3}</span>
              </hgroup>
              <hgroup>
                <b>EOC</b>
                <i><Progress showInfo={false} /><Progress percent={70} showInfo={false} status="exception" /></i>
                <span>₩{EOS.EOS4}</span>
              </hgroup>
              <hgroup>
                <b>EOC</b>
                <i><Progress showInfo={false} /><Progress percent={50} showInfo={false} status="exception" /></i>
                <span>₩{EOS.EOS5}</span>
              </hgroup>
              <hgroup>
                <b>EOC</b>
                <i><Progress showInfo={false} /><Progress percent={30} showInfo={false} status="exception" /></i>
                <span>₩{EOS.EOS6}</span>
              </hgroup>
            </div>
            <div className='bottom'>
              <h2>{languages === "Korean" ? "보유현황" : (languages === "Chinese" ? "持有状态" : "Holding status")}</h2>
              <div className='EOS'>
                <div>
                  <h3>EOS<span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h3>
                  <Table size="small" columns={EOS_columns} dataSource={EOS_data} pagination={false} />
                </div>
              </div>
              <div className='EOS'>
                <div>
                  <h3>EOS<span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h3>
                  <Table size="small" columns={EOS_columns} dataSource={EOS_data} pagination={false} />
                </div>
              </div>
              <div className='EOS'>
                <div>
                  <h3>EOS<span>{languages === "Korean" ? "더보기" : (languages === "Chinese" ? "更多" : "More")}</span></h3>
                  <Table size="small" columns={EOS_columns} dataSource={EOS_data} pagination={false} />
                </div>
              </div>
            </div>
          </div>
          <div className='right'>
            <Chart sizes="large" header={languages === "Korean" ? "EOS 보유 수량" : (languages === "Chinese" ? "EOS拥有数量" : "EOS owned quantity")} />
            <Chart sizes="large" header={languages === "Korean" ? "ADA 보유 수량" : (languages === "Chinese" ? "ADA拥有数量" : "ADA owned quantity")} />
          </div>
        </main>
      </div>
      <div className="footer">
        <hgroup>※ {languages === "Korean" ? "코인의 수량은 미체결 데이터의 영향으로 변동될 수 있으나, 시스템은 항상 동일한 코인의 수량을 유지하기 위해 움직입니다." : (languages === "Chinese" ? "受“待成交”数据的影响，交易所币量可能会出现波动，但系统始终保持币量不变。" : "The quantity of coins may fluctuate under the influence of Pending data, but the system always works to maintain the same quantity of coins.")}</hgroup>
      </div>
    </div>
  )
}
